<template>
  <h2>ref的另一个作用:可以获取页面中的元素</h2>
  <input type="text" ref="myInput" />
</template>

<script lang="ts">
import { defineComponent, ref, onMounted } from 'vue'

// 需求:当页面加载完毕后,页面中的文本框可以直接获取焦点(自动获取焦点)
export default defineComponent({
  name: 'App',
  setup() {
    // 默认是空的，页面加载完毕,说明组件已经存在了，获取文本框元素
    const myInput = ref<HTMLElement | null>(null)
    onMounted(() => {
      myInput.value && myInput.value.focus()
    })
    return {
      myInput
    }
  }
})
</script>

<style scoped>
</style>